<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>矿业大学--地质监测</title>
</head>
<body>
	<div id="main" style="height:400px"></div>
    <script type="text/javascript" src="/static/javascripts/moment.js"></script>
    <script type="text/javascript" src="/static/javascripts/jquery-1.11.3.min.js"></script>
	<script src="/static/javascripts/dist/echarts.js"></script>
	<script type="text/javascript">

       function formatDate(date) {
            if (date.indexOf('AM') == -1) {
                var a = date.slice(0,-2);
                var right = a.slice(12);
                var left = a.slice(0,12);
                right = right.split(':');
                right[0] = right[0]+12+'';
                return a + right.join(':')+' GMT+0800 (CST)';
            } else {
                var a = date.slice(0,-2);
                return a+' GMT+0800 (CST)';
            }
       }
       $.post("/data/fetchData",
            {id: 11},
            function(data)
            {
                if(data.code==1)
                {
                    require.config({
                        paths: {
                            echarts: '/static/javascripts/dist/'
                        }
                    });

                    require(
                        [
                            'echarts',
                            'echarts/chart/line',
                        ],
                        function (ec) {
                            // 基于准备好的dom，初始化echarts图表
                            var myChart = ec.init(document.getElementById('main')); 
                            
                            var option = {
                                title : {
                                    text : '时间坐标折线图',
                                    subtext : 'dataZoom支持'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter : function (params) {
                                        var date = new Date(params.value[0]);
                                        data = date.getFullYear() + '-'
                                               + (date.getMonth() + 1) + '-'
                                               + date.getDate() + ' '
                                               + date.getHours() + ':'
                                               + date.getMinutes();
                                        return data + '<br/>'
                                               + params.value[1] 
                                    }
                                },
                                toolbox: {
                                    show : true,
                                    feature : {
                                        mark : {show: true},
                                        dataView : {show: true, readOnly: false},
                                        restore : {show: true},
                                        saveAsImage : {show: true}
                                    }
                                },
                                dataZoom: {
                                    show: true,
                                    start : 70
                                },
                                legend : {
                                    data : ['压力']
                                },
                                grid: {
                                    y2: 80
                                },
                                xAxis : [
                                    {
                                        type : 'time',
                                        splitNumber:10
                                    }
                                ],
                                yAxis : [
                                    {
                                        type : 'value'
                                    }
                                ],
                                series : [
                                    {
                                        name: '压力',
                                        type: 'line',
                                        showAllSymbol: true,
                                        symbolSize: function (value){
                                            return Math.round(value[2]/10) + 2;
                                        },
                                         data: (function () {
                                            var d = [];
                                            var array = data.data;
                                            for (var i = 0; i < array.length; i++) {
                                                d.push([
                                                   new Date(array[i].c_date),
                                                   parseInt(array[i].pressure).toFixed(2) - 0,
                                                   2
                                                ]);
                                            }
                                            return d;
                                        })()
                                    }
                                ]
                            };
                    
                            // 为echarts对象加载数据 
                            myChart.setOption(option); 
                        }
                    );
                }else {
                   alert(data.msg);
                }
            },"json");
	</script>
</body>
</html>